<template>
  <div class="nav_outer">
    <div class="search_bar">
      <div class="bar_location flex_center" @click="switchCity">
        <img src="../assets/img/map@2x.png" alt />
        <span>{{locate || '苏州'}}</span>
      </div>
      <div class="bar_input flex_auto">
        <img src="../assets/img/fangdajing@2x.png" alt />
        <input type="text" placeholder="闻泰通讯" v-model="searchtext" @focus="search" />
      </div>
      <div class="bar_btn" @click="search">搜索</div>
    </div>
    <div class="mui-slider">
      <div class="mui-slider-group mui-slider-loop">
        <div class="mui-slider-item mui-slider-item-duplicate">
          <img :src="banners[banners.length-1] && banners[banners.length-1].url" alt="" @click="tolink(banners[banners.length-1])">
        </div>
        <div class="mui-slider-item" v-for="item in banners" v-bind:key="item.id" @click="tolink(item)">
          <img :src="item.url" alt />
        </div>
        <div class="mui-slider-item mui-slider-item-duplicate">
          <img :src="banners[0] && banners[0].url" alt="">
        </div>
      </div>
      <!-- <div class="mui-slider-indicator" id="sliin">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
      </div> -->
    </div>
    <div class="flex_center middletabs">
      <div class="middletab" @click="tojobs(2)">
        <img src="../assets/img/组 18@2x.png" alt />
        <p>企业急招</p>
      </div>
      <div class="middletab" @click="tojobs(5)">
        <img src="../assets/img/组 19@2x.png" alt />
        <p>寒暑假工</p>
        <!-- <p>没有这个type</p> -->
      </div>
      <div class="middletab"  @click="navito('overtime')">
        <img src="../assets/img/jijiaban@2x.png" alt="">
        <p>记加班</p>
      </div>
      <div class="middletab" @click="toShop">
        <img src="../assets/img/组 21@2x.png" alt />
        <p>福利商城</p>
      </div>
    </div>
    <div class="blockads">
      <div class="leftad" @click="navito('recoreward')">
        <img src="../assets/img/矩形 4@2x.png" alt />
      </div>
      <div class="rightad">
        <div class="rtad" @click="tojobs(4)">
          <img src="../assets/img/矩形 41@2x.png" alt />
        </div>
        <div class="rbad" @click="navito('locations')">
          <img src="../assets/img/矩形 42@2x.png" alt />
        </div>
      </div>
    </div>
    <div class="jobs">
      <div class="jobs_title">热门招聘</div>
      <div class="jobs_wrap" style="min-height:4rem">
        <div class="job" v-for="item in joblists" v-bind:key="item.id" :data-id="item.id">
          <p class="job_title">{{item.title}}</p>
          <p class="job_tag">
            <span v-for="jtag in (item.positionTags.split(','))" v-bind:key="jtag">{{jtag}}</span>
          </p>
          <div class="flex_bet">
            <span class="job_price">{{item.salaryTips}}元/月</span>
            <span class="job_sign" v-if="item.marketingType==0">入职奖</span>
          </div>
          <div class="jobtags flex_bet">
            <div><span v-for="tag in (item.welfareTags.split(','))" v-bind:key="tag">{{tag}}</span></div>
            <div class="corner">{{item.cityName}}·{{ (item.updateDate || item.createDate) | today}}</div>
          </div>
        </div>
        <div class="mui-loading" v-if="loading || getLocating">
          <div class="mui-spinner">
          </div>
          <p style="text-align:center"> 加载数据中</p>
        </div>
      </div>
    </div>
    <div class="palceholder"></div>

    <div class="mui-backdrop" v-if="false">
      <div class="reward">
        <img src="../assets/img/reward@2x.png" alt @click="navito('newreward')" />
        <div class="close_backdrop" @click="hidemask()">×</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showmask: false,
      banners: [],
      pullre: "",
      pageNum: 1,
      totalPage: 1,
      pageSize: 10,
      joblists: [],
      searchtext: "",
      locate: '',
      loading: false,
      getLocating: false,
    };
  },
  mounted() {
    let mui = this.mui,
      that = this;
    this.interactive.reachBottomLoad({
     callback: function(){
       if(that.loading || that.getLocating){
          return;
      }
      that.pageNum+=1;
      that.loadJobs();
    }})
    this.bindevents();
  },
  methods: {
    tolink(item){
      if(item.hyperLink){
        localStorage.setItem('notclear',1);
        window.location.href=item.hyperLink;
      }
    },
    toShop(){
      localStorage.setItem('notclear',1);
      location.href = 'https://shop.youzhijungroup.com/Shop/index/sid/4032038.html';
    },
    hidemask() {
      this.showmask = false;
      localStorage.setItem('awardTask',1);
    },
    navito(url) {
      this.$router.push({ path: url });
    },
    search() {
      //this.$router.push("/searchresult?text=" + this.searchtext);
      this.$router.push("/searchresult");
    },
    tojobs(type) {
      this.$router.push({ path: "/hotjobs?type=" + type });
    },
    loadJobs() {
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http2.get("/mobile/enrollment/page", {
        cityName: this.locate || '苏州',
        current: that.pageNum,
        size: that.pageSize,
        type: 1,
        status: 1
      }).then(
        res => {
          if (that.pageNum == 1) {
            that.joblists = res.object;
          } else {
            that.joblists = that.joblists.concat(res.object);
          }
          that.totalPage = res.totalPage;
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    },
    loadBanners() {
      let that = this;
      let mui = this.mui;
      that.Http2.get("/mobile/banner/page", {
        current: 1,
        size: 10
      }).then(
        res => {
          let banners = res.data.records;
          banners.forEach((item,index)=>{
            if(item.url){
              item.url=that.Http.imgpre+item.url;
            }
          })
          this.banners = banners;
          setTimeout(function(){
            var gallery = mui(".mui-slider");
            gallery.slider({
              interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
            });
          })
        },
        () => {}
      );
    },
    // getLocate(){
    //   let that = this;
    //   let store = localStorage.getItem('locate');
    //   if(store){
    //     that.locate = store;
    //     that.loadJobs();
    //   }else{
    //     if(this.app.isInAPP){
    //       this.getLocating = true;
    //       if(this.app.getlocate){
    //         this.app.getlocate().then((res)=>{
    //           that.getLocating = false;
    //           let locate = JSON.parse(res);
    //           that.locate = locate.city;
    //           localStorage.setItem('locate',locate.city);
    //           that.loadJobs();
    //         })
    //       }else{
    //         setTimeout(function(){
    //           that.getLocate();
    //         },150)
    //       }
    //     }else{
    //       that.loadJobs();
    //     }
    //   }
      
    // },
    getLocate(){
      let that = this;
      let store = this.$store.state.locate;
      if(store){
        that.locate = store;
        that.loadJobs();
      }else{
        if(this.app.isInAPP){
          this.getLocating = true;
          if(this.app.getlocate){
            this.app.getlocate().then((res)=>{
              that.getLocating = false;
              let locate = JSON.parse(res);
              that.locate = locate.city;
              that.$store.state.locate = locate.city;
              that.loadJobs();
            },err=>{
              that.getLocating = false;
              that.loadJobs();
            })
          }else{
            setTimeout(function(){
              that.getLocate();
            },150)
          }
        }else{
          that.loadJobs();
        }
      }
      
    },
    switchCity(){
      let that = this;
      if(this.app.isInAPP){
        this.app.selectcity().then((res)=>{
          that.locate = res;
          //localStorage.setItem('locate',res);
          that.$store.state.locate = res;
          that.pageNum=1;
          that.loadJobs();
        })
      }else{
        this.$router.push('/choosecity');
      }
    },
    bindevents() {
      let that = this,
        mui = this.mui;
      mui(".jobs").on("tap", ".job", function() {
        var id = this.getAttribute("data-id");
        that.$router.push({ path: "/gangwei/" + id });
      });
    },
    loadAwardstatu(){
      let uid = localStorage.getItem("uid");
      if(!uid){
        return;
      }
      let that = this;
      that.Http.get("/yzj/activity/getJoinActivity", null).then(
        res => {
          if(res.length<4 && localStorage.getItem('awardTask')!=1){
            that.showmask = true;
          }
        }
      );
    }
  },
  created() {
    var self = this;
    this.getLocate();
    this.loadBanners();
    this.loadAwardstatu();
  },
  components: {}
};
</script>

<style lang='scss' scoped>
@function px2em($px) {
  @if (unitless($px)) {
    @return px2em($px + 0px);
  } @else if (unit($px) == em) {
    @return $px;
  }
  @return ($px / 75px) * 1rem;
}
.mui-slider {
  background: #efefef;
}
.mui-slider-indicator .mui-indicator {
  background: #626262;
}
.mui-slider-indicator .mui-indicator.mui-active {
  background: #fff;
}
.mui-backdrop {
  background: rgba(98, 98, 98, 0.9);
  bottom: 0;
  z-index: 1000000;
}
.nav_outer {
  background: #fff;
  padding-top: px2em(153);
}
.search_bar {
  position: fixed;
  background: #fff;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  padding: px2em(80) 0 px2em(18);
  z-index: 100;
  .bar_location {
    padding: 0 px2em(28);
    > img {
      width: px2em(28);
      margin-right: px2em(28);
    }
  }
  .bar_input {
    flex: 1;
    background: #efefef;
    height: px2em(55);
    border-radius: 5px;
    img {
      width: px2em(35);
      height: px2em(35);
      vertical-align: middle;
      margin: 0 px2em(18);
    }
    > input {
      flex: 1;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      color: #333;

      font-size: 0.95em;
    }
    > input::-webkit-input-placeholder {
      color: #999;
    }
  }

  .bar_btn {
    width: px2em(120);
    text-align: center;
    line-height: px2em(55);
  }
}
.mui-slider-group {
  height: px2em(320);
  background: #ccc;
}
.mui-slider-item {
  background: #ccc;
}
.middletab {
  flex: 1;
  text-align: center;
  padding: px2em(26) 0;
  > img {
    width: px2em(80);
    margin-bottom: px2em(24);
  }
  > p {
    color: #333;
  }
}
.blockads {
  padding: 0 px2em(30);
  display: flex;
  img {
    width: 100%;
  }
  .leftad {
    width: px2em(310);
    height: px2em(290);

    margin-right: px2em(30);
  }
  .rightad > div {
    width: px2em(350);
    height: px2em(135);
    overflow: hidden;

    &:first-child {
      margin-bottom: px2em(20);
    }
  }
}
.jobs {
  margin: px2em(30);
  .jobs_title {
    padding-left: 0.5em;
    border-left: 6px solid #507df4;
  }
  .job_title {
    font-size: 1.2em;
    margin-top: 10px;
    color: #333;
  }
  .job_price {
    font-size: 1.2em;
    color: red;
  }
  .job_sign {
    background: #ffaa24;
    background: linear-gradient(to right, #ffaf1c 0%, #ff9337 100%);
    width: px2em(108);
    text-align: center;
    height: px2em(46);
    line-height: px2em(46);
    border-radius: px2em(18);
    color: #fff;
    display: inline-block;
    font-size: 0.8em;
  }
  .jobtags {
    margin-top: px2em(30);
    .corner{
      color: #aaa;
      font-size:0.9em;
    }
  }
  .jobtags  span {
    height: px2em(40);
    border-radius: px2em(23);
    line-height: px2em(40);
    color: #00b9ff;
    border: 1px solid #00b9ff;
    padding: 3px 5px;
    font-size: 0.8em;
    margin-right: 6px;
  }
  .job{
    padding-bottom: px2em(30);
    border-bottom: 1px solid #eee;
    &:last-child{border-bottom: 0;}
  }
}
.reward {
  width: px2em(650);
  height: px2em(820);
  position: absolute;
  top: 50%;
  margin-top: - px2em(410);
  left: px2em(25);
  > img {
    width: 100%;
  }
  .close_backdrop {
    position: absolute;
    right: 40px;
    top: 80px;
    width: px2em(60);
    height: px2em(60);
    text-align: center;
    line-height: px2em(50);
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    font-size: 2em;
  }
}
</style>